<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>树形组件文档 - layui.tree</title>
	<link rel="stylesheet" href="../libs/layui/layui-2.9.14/dist/css/layui.css">
	<script src="../libs//layui//layui-2.9.14/dist/layui.js"></script>
	<style>


	</style>
</head>

<body style="margin:100px ;">
	<button type="button" class="layui-btn" onclick="myclick()">一个标准的按钮</button>
	<div id="test1"></div>
	<script>
		let tree = null;
		layui.use('tree', function () {
			tree = layui.tree;

			//渲染
			var inst1 = tree.render({
				elem: '#test1',   //绑定元素
				accordion: true,
				showCheckbox: true,
				edit: ['add', 'update', 'del'],
				id: 'demoId', //定义索引,测试发现，data中必须有 id 属性

				data: [{
					id:"1",
					title: '江西',  //一级菜单
					children: [{
						id:"nanchang",
						title: '南昌',  //二级菜单
						children: [{
							id:"gaoxinqu",
							title: '高新区' //三级菜单
							//…… //以此类推，可无限层级
						}]
					}]
				}, {
					id:"2",
					title: '陕西',  //一级菜单
					children: [{
						id:"xian",
						title: '西安' //二级菜单
					}]
				}],
				//节点被点击的回调
				click: function (obj) {
					console.log("被点击:", obj);
					// console.log(obj.data); //得到当前点击的节点数据
					// console.log(obj.state); //得到当前节点的展开状态：open、close、normal
					// console.log(obj.elem); //得到当前节点元素

					// console.log(obj.data.children); //当前节点下是否有子节点


					//获得选中的节点
					var checkData = inst1.getChecked('demoId');
					console.log("获取选中的节点", checkData)

				},
				//复选框被点击的回调
				oncheck: function (obj) {
					console.log("被勾选：", obj);
					// console.log(obj.data); //得到当前点击的节点数据
					// console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
					// console.log(obj.elem); //得到当前节点元素
				},
				// 操作节点的回调
				operate: function (obj) {
					var type = obj.type; //得到操作类型：add、edit、del
					var data = obj.data; //得到当前节点的数据
					var elem = obj.elem; //得到当前节点元素

					//Ajax 操作
					var id = data.id; //得到节点索引
					if (type === 'add') { //增加节点
						//返回 key 值
						console.log("add", obj)
						return 123;
					} else if (type === 'update') { //修改节点
						console.log("update", obj)
						console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
					} else if (type === 'del') { //删除节点
						console.log("del", obj)
					};
				}

			});


		});
		function myclick() {
			//可以重载所有基础参数
			// tree.reload('demoId', {
			// 	//新的参数
			// 	data: [] //数据源

			// });

			//执行节点勾选
			// tree.setChecked('demoId', 1); //单个勾选 id 为 1 的节点
			tree.setChecked('demoId', [1, 2]); //批量勾选 id 为 2、3 的节点
		}
	</script>


</body>

</html>